<template>
  <div class="message">
      <div class="message-wrap" v-if="$route.name === 'message'">
        <no-login icon="comment" v-if="!$store.state.isLogin">
        <span slot="title">
            <span>{{ $t("noPermissionViewMessage") }}</span>
        </span>
        </no-login>
        <div class="myMessage"
             v-else
             :style="{ height: bodyHeight + 'px' }"
        >
          <div class="errorTips" v-if="showErrorImage">
            <van-empty>
              <template #image>
                <img src="https://img.yzcdn.cn/vant/empty-image-default.png" alt="">
              </template>
              <template #default>
                <div class="describe">{{$t('notAnyMessage')}}</div>
              </template>
            </van-empty>
          </div>
          <div class="message-list" v-else>
            <div class="list-group">
              <div
                      class="list-item"
                      v-for="(item, index) in messageDetail"
                      :key="index"
                      @click="entryMessageDetail(item.userId, item.friendId, item.order)"
              >
                <div class="friend_avatar">
                    <img :src="item.avatar" alt="用户头像" v-if="item.avatar" />
                    <div class="svg" v-else>
                        <svg  t="1587545175014" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10677" width="32" height="32">
                            <path d="M0 512a512 512 0 1 0 1024 0 512 512 0 0 0-1024 0z" fill="#7FC2FF" p-id="10678"></path>
                            <path d="M840.594286 850.797714A463.542857 463.542857 0 0 1 511.707429 987.428571 463.542857 463.542857 0 0 1 182.857143 850.797714v-299.264C182.857143 368.128 330.093714 219.428571 511.707429 219.428571c181.650286 0 328.886857 148.699429 328.886857 332.068572 0.731429 173.092571 0.731429 272.859429 0 299.300571z" fill="#EBF9FF" p-id="10679"></path>
                            <path d="M329.142857 457.142857a54.857143 54.857143 0 1 0 109.714286 0 54.857143 54.857143 0 0 0-109.714286 0zM585.142857 457.142857a54.857143 54.857143 0 1 0 109.714286 0 54.857143 54.857143 0 0 0-109.714286 0zM402.285714 585.142857a109.714286 109.714286 0 0 0 219.428572 0" fill="#66B5FF" p-id="10680"></path></svg>
                    </div>
                    <span class="circle-widget"
                          v-if="item.unReadMessage"
                          v-text="item.unReadMessage"
                    ></span>
                </div>
                <div class="message_info">
                  <div class="about_friendInfo">
                    <span class="friend_nickname" v-text="item.nickname"></span>
                    <span class="last_message" v-text="item.message"></span>
                  </div>
                  <div class="order_picture">
                    <img :src="item.image" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <router-view />
  </div>
</template>

<script>
import noLogin from 'components/content/nologin/nologin';
import { Empty } from 'vant';

export default {
    name: 'message',
    components: {
        noLogin,
        [Empty.name]: Empty
    },
    data () {
        return {
            bodyHeight: 0,
            showErrorImage: false,
            messageDetail: []
        };
    },
    mounted () {
        this.bodyHeight = this.$util.ScreenCanUseHeight(this.$store.state.tabbarHeight);
    },
    methods: {
        entryMessageDetail (messageCreator, messageReceive, order) {
            const identify = messageCreator === localStorage.getItem('id')
                ? messageReceive : messageCreator;
            this.$router.push({
                name: 'msg-detail',
                params: {
                    chatId: identify,
                    orderId: order
                }
            });
        },
        requestTablist () {
            this.$util.loadingToast();
            this.$api.messageApi
                .getTabListMessage({ userid: localStorage.getItem('id') })
                .then(result => {
                    if (result.code === 2023) {
                        this.messageDetail = result.collections;
                        this.showErrorImage = false;
                    } else {
                        this.showErrorImage = true;
                    }
                })
                .catch(error => {
                    console.error(error);
                });
        }
    },
    watch: {
        $route: {
            handler (value) {
                if (value.name === 'message') {
                    if (localStorage.getItem('id') || this.$store.state.userInfo._id) {
                        this.requestTablist();
                    }
                }
            },
            immediate: true
        }
    }
};
</script>

<style scoped lang="less" src="./less/message.less"></style>
